<template>
	<view class="navigation" :style="[ navStyle ]">
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="nav-box" :style="[ slotStyle ]">
			<view v-if="isIcon" :class="['icon-box', { 'icon-box-active' : !$slots.default }]">
				<!-- 自己修改 换成自己的图标 -->
				<view class="icon" v-if="showHome" @click="gohome">回首页</view>
				<view class="icon" v-else @click="back">返回</view>
			</view>
			
			<view class="navigation-title" :style="[ navbarInnerStyle ]">
				<view v-if="$slots.default" class="slot-box">
					<slot></slot>
				</view>
				<view v-else class="title">{{title == '' ? '自定义导航' : title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	
	// #ifdef MP-WEIXIN
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		props:{
			isIcon : { type: Boolean,default: true },
			title:{ type: String, default: '自定义导航' },
			// title 样式 
			navStyle: {
				type: Object,
				default () {
					return {
						background: '#fff',
						color: '#333',
						fontSize: '28rpx'
					}
				}
			}
		},
		data(){
			return {
				menuButtonInfo,
				statusBarHeight:systemInfo.statusBarHeight
			}
		},
		mounted() {
			
		},
		
		computed:{
			showHome() {
				let pages = getCurrentPages();
				if (pages.length >= 2) {return false} else {return true}
			},
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				style.padding = `${ menuButtonInfo.top - this.statusBarHeight }px 0`
				style.height = `${ menuButtonInfo.height + ( menuButtonInfo.top - this.statusBarHeight ) * 2 }px`
				style.boxSizing = 'border-box'
				
				return style;
			},
			// 插槽宽度
			slotStyle() {
				let style = {};
				this.$slots.default ? style.width = `${ menuButtonInfo.left }px` : style
				return style
			}
		},
		methods: {
			gohome(){
				uni.reLaunch({url:'/pages/index/module'})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigation{position: sticky;top: 0;left: 0;right: 0;z-index: 12;
		/* #ifdef H5 */
		height: 88rpx;
		/* #endif */
		.nav-box{display: flex;position: relative;
			/* #ifdef H5 */
			height: 88rpx;
			/* #endif */
			.icon-box{
				/* #ifdef H5 */
				height: 88rpx;display: flex;align-items: center;justify-content: flex-start;
				/* #endif */
				&-active{ position: absolute;top: 50%;transform: translateY(-50%); }
				&>.icon{padding:20rpx 0 20rpx 25rpx;font-size: 30rpx;}
			}
			.navigation-title{display: flex;flex: 1;
				.title{flex: 1;display: flex;align-items: center;justify-content: center;}
				.slot-box{display: flex;flex: 1;}
			}
		}
	}
</style>
